<template>
  <div class="home">
    <div class="home-head mt-container m-0-auto d-flex">
      <category></category>
      <ads></ads>
      <user></user>
    </div>
    <!-- style -->
    <div class="home-mid mt-container m-30-auto border">
      <m-card title="有格调" colorNum='bg-home-nav-1'>
        <template #item1>
          <dd
          v-for="item in styleContent.tabs" :key="item.tab"
          class="px-5 fs-14" :class="{active:selectStyle===item.tab}"
          :selectStyle = 'item.tab'
          @mouseenter="enter"
          >
            {{item.text}}
            <i class="el-icon-caret-top text-white fs-18"></i>
          </dd>
        </template>
      </m-card>
      <div class="mid-content py-10 px-10 bg-white d-flex flex-wrap" style="height:650px;">
        <router-link to="/" class="p-10" style="width:33.33%;"
        v-for="item in styleContent[selectStyle]" :key="item.id"
        >
          <div style="width: 100%; height:208px; overflow:hidden">
            <img class="border" style="width:100%;" :src="item.imgUrl | setWH('368.208')" alt="">
          </div>
          <p class="mt-20 text-ftcolor-3">{{item.title}}</p>
          <p v-if="item.subTitle" class="fs-12 text-ftcolor-1 py-10">{{item.subTitle}}</p>
          <div v-else-if="item.tags" class="py-10">
            <span class="fs-12 text-ftcolor-1 mx-5" v-for="(v,i) in item.tags" :key="i">{{v.tag}}</span>
          </div>
          <div class="d-flex jc-between ai-center">
            <div class="d-flex ai-center">
              <span class="fs-18 text-home-nav-1">￥{{item.currentPrice}}</span>
              <span class="fs-12 ml-5 text-ftcolor-1" style="text-decoration:line-through">{{item.oldPrice}}</span>
            </div>
            <span class="fs-12 text-ftcolor-1">{{item.bottomInfo}}</span>
          </div>
        </router-link>
      </div>
    </div>
    <!-- cheap -->
    <div class="home-Navigation mt-container m-0-auto border px-20 pt-20 bg-white">
      <m-navgation></m-navgation>
    </div>
  </div>
</template>

<script>
import category from '@/components/home/category.vue'
import ads from '@/components/home/ads.vue'
import user from '@/components/home/user.vue'
import MCard from '@/components/common/card.vue'
import MNavgation from '@/components/common/navigation.vue'

export default {
  name: 'home',
  data() {
    return {
      selectStyle: 'all',
      styleContent: {
        tabs: [],
        all: [],
        feast: [],
        spa: [],
        show: [],
        journey: [],
      },
    }
  },
  components: {
    category, ads, user, MCard, MNavgation
  },
  mounted() {
    this.fetchStyleContent()
  },
  methods: {
    async fetchStyleContent() {
      if(this.styleContent[this.selectStyle] && this.styleContent[this.selectStyle].length === 0) {
        let {status, data:{data, tabs}} = await this.$axios.get(`/ptapi/getScenesList?theme=quality&tab=${this.selectStyle}&ci=1&limit=10`)
        this.$set(this.styleContent, `${this.selectStyle}`, data)
        if (this.styleContent.tabs && this.styleContent.tabs.length === 0) {
          this.$set(this.styleContent, 'tabs', tabs)
        }
      }
    },
    enter(e) {
      if(e.target.getAttribute('selectStyle') === this.selectStyle) {
        return 
      }
      this.selectStyle = e.target.getAttribute('selectStyle')
      this.fetchStyleContent()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/_varibles.scss';
.home {
  .home-mid {
    .mid-content {
      > a:hover {
        background-color: map-get($colors, 'bgcolor');
        border-radius: 5px;
      }
    }
  }
}
</style>

